@extends('layouts.console_main')

@section('resources')
    @parent
    <style type="text/css">
        #container{ width:90%; height: 500px;}
        tfoot{background:lightblue;}
    </style>
@endsection
@section('content')
@section('content')
<div class="right_col" role="main">
    <!-- top tiles -->
    <div class="row tile_count">
        <div class="col-md-4 col-sm-4 col-xs-6 tile_stats_count">
            <span class="count_top"><i class="fa fa-user"></i> 企业总数量/水表总数量</span>
            <div class="count">{{$enterprise_count}} / {{$watermeter_count}}</div>
            {{--<span class="count_bottom"><i class="green">4% </i> From last Week</span>--}}
        </div>
        <div class="col-md-4 col-sm-4 col-xs-6 tile_stats_count">
            <span class="count_top"><i class="fa fa-clock-o"></i> 昨天用水量</span>
            <div class="count">{{$consumption}}</div>
            {{--<span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>3% </i> From last Week</span>--}}
        </div>
        <div class="col-md-4 col-sm-4 col-xs-6 tile_stats_count">
            <span class="count_top"><i class="fa fa-user"></i> 昨天上传数据水表数量</span>
            <div class="count green">{{$yesterday_reported_data_watermeter_count}}</div>
            {{--<span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span>--}}
        </div>
    </div>
    <!-- /top tiles -->

    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="dashboard_graph">

                <div class="row x_title">
                    <div class="col-md-6">
                        <h3>水表使用情况 <small></small></h3>
                    </div>
                    <div class="col-md-6">
                        <div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
                            <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                            <span>December 30, 2014 - January 28, 2015</span> <b class="caret"></b>
                        </div>
                    </div>
                </div>

                <div class="col-md-9 col-sm-9 col-xs-12">
                    <div id="chart_plot_01" class="demo-placeholder"></div>
                </div>
                <div class="col-md-3 col-sm-3 col-xs-12 bg-white">
                    <div class="x_title">
                        <h2>区域</h2>
                        <div class="clearfix"></div>
                    </div>

                    <div class="col-md-12 col-sm-12 col-xs-6">
                        <div>
                            <p>肿瘤医院总表</p>
                            <div class="">
                                <div class="progress progress_sm" style="width: 76%;">
                                    <div class="progress-bar bg-blue" role="progressbar" data-transitiongoal="80"></div>
                                </div>
                            </div>
                        </div>
                        {{--<div>--}}
                            {{--<p>水表2</p>--}}
                            {{--<div class="">--}}
                                {{--<div class="progress progress_sm" style="width: 76%;">--}}
                                    {{--<div class="progress-bar bg-green" role="progressbar" data-transitiongoal="60"></div>--}}
                                {{--</div>--}}
                            {{--</div>--}}
                        {{--</div>--}}
                    </div>
                    <div class="col-md-12 col-sm-12 col-xs-6">
                        {{--<div>--}}
                            {{--<p>水表3</p>--}}
                            {{--<div class="">--}}
                                {{--<div class="progress progress_sm" style="width: 76%;">--}}
                                    {{--<div class="progress-bar bg-green" role="progressbar" data-transitiongoal="40"></div>--}}
                                {{--</div>--}}
                            {{--</div>--}}
                        {{--</div>--}}
                        {{--<div>--}}
                            {{--<p>水表4</p>--}}
                            {{--<div class="">--}}
                                {{--<div class="progress progress_sm" style="width: 76%;">--}}
                                    {{--<div class="progress-bar bg-green" role="progressbar" data-transitiongoal="50"></div>--}}
                                {{--</div>--}}
                            {{--</div>--}}
                        {{--</div>--}}
                    </div>

                </div>

                <div class="clearfix"></div>

            </div>
        </div>
        <div class="clearfix"></div>
        <br/>
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>地图</h2>
                    <ul class="nav navbar-right panel_toolbox">
                        <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Settings 1</a>
                                </li>
                                <li><a href="#">Settings 2</a>
                                </li>
                            </ul>
                        </li>
                        <li><a class="close-link"><i class="fa fa-close"></i></a>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>

                <div class="x_content">
                    <div class="table-responsive">
                        <div id="container"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection

@section('scriptResources')
    @parent
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=a9fe1b184bacd00ecd70365903024419&plugin=AMap.Autocomplete"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    <script>
        var map = new AMap.Map("container", {
            resizeEnable: true,
            zoom: 10
        });
        $.ajax({
            url : '/water/first_class_node/list',
            data: { },
            type:'get',
            dataType:'json',
            success:function(data){
                if(data.status == 'success') {
                    var data = data.data;
                    var length =  data.length;
                    if(length>0) {
                        //中心点
                        var market_center_content = '<div><a target="_blank" href="/water/statistic/get?id=' + data[0].id + '" class="color:red;"><img src="https://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png"></a></div>';
                        marker = new AMap.Marker({  //加点
                            map: map,
                            position: [data[0].longitude, data[0].latitude],
                            clickable:true,
                            title:data[0].enterprise_name,
                            content:market_center_content
                        });
                    }
                    map.setFitView();
                    for(var i=1; i<length; i++) {
                        var list = data[i];
                        var market_content = '<div><a target="_blank" href="/water/statistic/get?id=' + list.id + '" class="color:red;"><img src="https://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png"></a></div>';
                        var marker1 = new AMap.Marker({  //加点
                            map: map,
                            position: [list.longitude, list.latitude],
                            title:list.enterprise_name,
                            clickable:true,
                            content:market_content
                        });
                    }
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert(XMLHttpRequest.status);
                alert(XMLHttpRequest.readyState);
                alert(textStatus);
            }
        });

    </script>
@endsection


